<template>
    <div class="indexBox" >
        <myNav types="3" name="项目" :develName="xmName"></myNav>
    <div class="home">
       
       <div class="wall message flex wrap">
        <div class="message-list">
            <img src="@/assets/img/bjBuilding/zero.png" class="detailImgWH" alt="">
            <div class="pBot">
                <div class="ymoney xmyomney1">
                    <img src="@/assets/img/bjBuilding/bjlts.png" alt="">
                </div>
                <div class="money1">{{buildingCount }}</div>
            </div>
        </div>
        <div class="message-list">
            <img src="@/assets/img/bjBuilding/zero1.png" class="detailImgWH" alt="">
            <div class="pBot">
                <div class="ymoney">
                    <img src="@/assets/img/bjBuilding/stshts.png" alt="">
                </div>
                <div class="money1">{{provinceAuditCount }}</div>
            </div>
        </div>
        <div class="message-list">
            <img src="@/assets/img/bjBuilding/zero.png" alt="" class="detailImgWH">
            <div class="pBot">
                <div class="ymoney">
                    <img src="@/assets/img/bjBuilding/sjjfs.png" alt="">
                </div>
                <div class="money1">{{practicalSubmitCount}}</div>
            </div>
        </div >
        <div class="message-list">
            <img src="@/assets/img/bjBuilding/zero1.png" alt="" class="detailImgWH">
            <div class="pBot">
                <div class="ymoney">
                    <img src="@/assets/img/bjBuilding/syhz.png" alt="">
                </div>
                <div class="money1">{{remainValue }}</div>
            </div>
        </div class="pBot">
        <div class="message-list">
            <img src="@/assets/img/bjBuilding/zero.png" alt="" class="detailImgWH">
            <div class="pBot">
                <div class="ymoney">
                    <img src="@/assets/img/bjBuilding/jkje.png" alt="">
                </div>
                <div class="money1">{{borrowMoney}}</div>
            </div>
        </div>
        <div class="message-list">
            <img src="@/assets/img/bjBuilding/zero.png" alt="" class="detailImgWH">
            <div class="pBot">
                <div class="ymoney">
                    <img src="@/assets/img/bjBuilding/hkje.png" alt="">
                </div>
                <div class="money1">{{returnMoney}}</div>
            </div>
        </div>
      
      </div>
      <div class="detailMain flex">
        <div class=" mainWidth" style="box-sizing: border-box;">
                <contentTitle :myIndex="15"></contentTitle>
                <div class="myProgress module-bg"> 
                    <myProgress :parms="parms" :pageSize="5"  :pageNumber="1" types="开发商"></myProgress>
                    <el-row class="kfssyzzb">
                        <el-col :span="12" class="echartsHeight">
                            <useEcharts :echartsOption="xmsjtjqkOption"  @childEvent="useSelectProjectAuditStatistics"  v-if="xmsjtjqkOption" @dialogData="dialogData" ></useEcharts>
                        </el-col>
                        <el-col :span="12" class="flex ac">
                            <bg  :colors="['#F6F279','#0290D2']" :comTtile="['已审核','未审核']" :comNumber="[StatisticsData.value.auditDoesCount,StatisticsData.value.unAuditCount]" :comPercent="[StatisticsData.value.auditDoesRate,StatisticsData.value.unAuditRate]" v-if="xmsjtjqkOption" ></bg>
                        </el-col>
                    </el-row>
                </div>
        </div>
        <div class=" mainWidth">
                <contentTitle :myIndex="16"></contentTitle>
                <div class="myProgress module-bg"> 
                    <myProgress :parms="parms" :pageSize="5"  :pageNumber="1" types="开发商"></myProgress>
                    <el-row class="kfssyzzb">
                        <el-col :span="12" class="echartsHeight">
                            <useEcharts :echartsOption="xmsjtjqkOption1"  @childEvent="useSelectProjectAuditStatistics"  v-if="xmsjtjqkOption" @dialogData="dialogData" ></useEcharts>
                        </el-col>
                        <el-col :span="12" class="flex ac">
                            <bg  :colors="['#417FEF','#0EF0D7']" :comTtile="['已交付','未交付']" :comNumber="[StatisticsData.value.deliveredCount,StatisticsData.value.unDeliveredCount]" :comPercent="[StatisticsData.value.deliveredRate,StatisticsData.value.unDeliveredRate]" v-if="xmsjtjqkOption" ></bg>
                        </el-col>
                    </el-row>
                </div>
        </div>
        <div class=" mainWidth">
                <contentTitle :myIndex="17"></contentTitle>
                <div class="myProgress module-bg"> 
                    <myProgress :parms="parms" :pageSize="5"  :pageNumber="1" types="开发商"></myProgress>
                    <el-row class="kfssyzzb">
                        <el-col :span="12" class="echartsHeight">
                            <useEcharts :echartsOption="xmsjtjqkOption2"  @childEvent="useSelectProjectAuditStatistics"  v-if="xmsjtjqkOption" @dialogData="dialogData" ></useEcharts>
                        </el-col>
                        <el-col :span="12" class="flex ac">
                            <bg  type="3" :colors="['#FF8A47','#B890FE']" :comTtile="['剩余还款金额','还款金额']" :comNumber="[StatisticsData.value.residueReturnMoney,StatisticsData.value.returnMoney]" :comPercent="[StatisticsData.value.residueReturnRate,StatisticsData.value.returnMoneyRate]" v-if="xmsjtjqkOption" ></bg>
                        </el-col>
                    </el-row>
                </div>
        </div>
      </div>
      <div class="detailFooter " style="position: relative;" >
        <contentTitle :myIndex="18"></contentTitle>
        <div class="time"  >
            <el-col :span="24" class="flex jend timeFlex" >
                <div   :class="parms.dateTypee == '1' ? 'times':'unTimes'" @click="timesEight('1')">近3月</div>
                <div   :class="parms.dateTypee == '2' ? 'times':'unTimes'" @click="timesEight('2')">近半年</div>
                <div   :class="parms.dateTypee == '3' ? 'times':'unTimes'" @click="timesEight('3')">近1年</div>
                <div   :class="parms.dateTypee == '4' ? 'times':'unTimes'" @click="timesEight('4')" class="relative">
                    <div class="absolute zdy" >自定义</div>
                    <el-date-picker
                   v-model="timeValue"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="optTime"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD"
                    >
                    </el-date-picker>
                </div>
            </el-col>
        </div>
        <div class="myProgress1 module-bg" style="margin-top: 0px;">
            <useEcharts :echartsOption="jkpmOption" @childEvent="useGetBaseLendLine" v-if="jkpmOption" @dialogData="dialogData" ></useEcharts>
        </div>
      </div>
   </div>
   <magnify
    v-if="magnifyEchartData"
    :housingSupplyStatsData="magnifyEchartData"
    @closeDialog="closeDialog"
  ></magnify>
</div>
    
</template>
   
<script setup>
import myNav from '@/components/bjBuilding/header/index.vue'
import useEcharts from '@/components/bjBuilding/useEcharts/index.vue'
import contentTitle from '@/components/bjBuilding/contentTitle/index.vue'
import bg from '@/components/bjBuilding/bg/index.vue'
import { selectProjectInfoStatistics,getBaseDeliverLine } from '@/api/bjBuilding'
import { xmsjtjqk3,kfsjkpm2 } from '@/utils/echartsData'
import {onMounted,ref,reactive,getCurrentInstance,watch} from 'vue'
import magnify from "@/components/public/magnify.vue";

const magnifyEchartData = ref(null)
let { proxy } = getCurrentInstance();
var buildingCount = ref(null)
var provinceAuditCount = ref(null)
var practicalSubmitCount = ref(null)
var remainValue = ref(null)
var borrowMoney = ref(null)
var returnMoney = ref(null)
var xmsjtjqkOption = ref(null)
var xmsjtjqkOption1 = ref(null)
var xmsjtjqkOption2 = ref(null)
var StatisticsData =  reactive({});
var jkpmOption = ref(null)
var getBaseDeliverLineData;
var xmName = proxy.$route.params.xmName
let timeValue = ref(null);
const parms = reactive({
    borrowXmId:proxy.$route.params.borrowXmId,
    dateTypee:1,
    startTimee:null,
    endTimee:null,
})

let selectProjectInfoStatisticsData;
const useSelectProjectInfoStatistics = async (type) => {
    if(type == 1){
        await selectProjectInfoStatistics({borrowXmId:proxy.$route.params.borrowXmId}).then(res => {
            if(res.code == 0){
                selectProjectInfoStatisticsData = res.data
                StatisticsData.value = res.data
                   buildingCount.value = res.data.buildingCount
                   provinceAuditCount.value = res.data.provinceAuditCount
                   practicalSubmitCount.value = res.data.practicalSubmitCount
                   remainValue.value = res.data.remainValue
                   borrowMoney.value = res.data.borrowMoney
                   returnMoney.value = res.data.returnMoney
                   xmsjtjqkOption.value =  xmsjtjqk3(['已审核','未审核'],[res.data.auditDoesCount,res.data.unAuditCount],['#F6F279','#0290D2'])
                   xmsjtjqkOption1.value =  xmsjtjqk3(['已交付','未交付'],[res.data.deliveredCount,res.data.unDeliveredCount],['#417FEF','#0EF0D7'])
                   xmsjtjqkOption2.value =  xmsjtjqk3(['剩余还款金额','还款金额'],[res.data.residueReturnMoney,res.data.returnMoney],['#FF8A47','#B890FE'])
          
            }
        
        })
    }else{
        xmsjtjqkOption.value =  xmsjtjqk3(['已审核','未审核'],[selectProjectInfoStatisticsData.auditDoesCount,selectProjectInfoStatisticsData.unAuditCount],['#F6F279','#0290D2'])
        xmsjtjqkOption1.value =  xmsjtjqk3(['已交付','未交付'],[selectProjectInfoStatisticsData.deliveredCount,selectProjectInfoStatisticsData.unDeliveredCount],['#417FEF','#0EF0D7'])
        xmsjtjqkOption2.value =  xmsjtjqk3(['剩余还款金额','还款金额'],[selectProjectInfoStatisticsData.residueReturnMoney,selectProjectInfoStatisticsData.returnMoney],['#FF8A47','#B890FE'])
    }
}
// 获取折线图数据
const useGetBaseDeliverLine = async () => {
        await getBaseDeliverLine(parms).then(res => {
            if(res.code == 0){
                getBaseDeliverLineData = res.data
                jkpmOption.value = kfsjkpm2(res.data)
            }

    })
}
// 选择时间
const timesEight = (id) => {
    if(id != 4){
        parms.dateTypee = id
        useGetBaseDeliverLine()
    }else{
        parms.dateTypee = id
    }
}
// 选择自定义时间
const optTime = () => {
    parms.startTimee = timeValue.value[0]
    parms.endTimee = timeValue.value[1]
    useGetBaseDeliverLine()
}
const dialogData = (val) => {
  console.log(val)
  magnifyEchartData.value = val;
}
const closeDialog = (val) => {
    magnifyEchartData.value = null
}

onMounted (() => {
    useSelectProjectInfoStatistics(1)
    useGetBaseDeliverLine()
})

const someMethod = () => {
   return {
    parms,
    timeValue,
    optTime,
   }
}
</script>
<style scoped lang="less">
.kfssyzzb{
    padding-left: 26px;
    padding-right: 36px;
}
.home {
width: 100vw;
height: 100vh;
background-image: url("@/assets/img/bjBuilding/bodybg.png");
background-size: 100% 100%;
display: grid;
grid-gap: 50px 50px;
grid-template-columns: 861px 858px;
grid-template-rows: 100px 344px 368px;
place-content: start center;
// 隐藏滚动条
overflow: hidden;
div {

color: #eee
}

.top {
grid-column: 1 / 4;
}
.wall{
    grid-column: 1 / 4;
    display: flex;
    justify-content: space-around;
}
.detailMain{
    grid-column: 1 / 4;
    display: flex;
    justify-content: space-between;
}
.detailFooter{
    grid-column: 1 / 4;
}
.mainWidth{
    width: 30%;
}

}
.message-list{
    width: 235px !important;
}
.pBot{
    bottom: 10px;
}
.ymoney{
    height: 30px;
    position: relative;
    // bottom: 5px;
}
.timeFlex{
    position: absolute;
    top: 3px;
}

</style>
